import React, { forwardRef } from 'react';
import * as SliderPrimitive from '@radix-ui/react-slider';

// Slider组件
const Slider = forwardRef<HTMLDivElement, SliderPrimitive.SliderProps>(({ className, ...props }, ref) => {
  return (
    <SliderPrimitive.Root
      ref={ref}
      className={`relative flex items-center select-none touch-none w-full h-5 ${className}`}
      {...props}
    >
      <SliderPrimitive.Track className="relative grow rounded-full bg-secondary">
        <SliderPrimitive.Range className="absolute rounded-full bg-primary" />
      </SliderPrimitive.Track>
      {props.defaultValue && props.defaultValue.length > 0 && (
        props.defaultValue.map((_, index) => (
          <SliderPrimitive.Thumb
            key={index}
            className="block h-5 w-5 rounded-full bg-background border-2 border-primary transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"
          />
        ))
      )}
    </SliderPrimitive.Root>
  );
});

// 导出组件
export {
  Slider,
};